<!-- 
    @file: 首页站点信息组件
    @auth: lizibin
 -->
<template>
  <div class="rightCard">
    <div class="bg">
      <p class="shine">无人做你的光芒就自己照亮前方</p>
    </div>

    <div @click="toSoup()">
      <h1>来碗毒鸡汤</h1>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { InsertVisitInfo } from "@/api/foreground/index";

import { onMounted, reactive, toRefs } from "vue";
const state = reactive({
  tagData: {},
});
const { tagData } = toRefs(state);
onMounted(() => {});
const toSoup = () => {
    window.open('http://www.nicelzb.fun:8080')
};
</script>

<style scoped>
.rightCard {
  position: fixed;
  top: 100px;
  right: 20px;
  width: 300px;
}

.bg {
  background: #000; /*设置元素背景颜色*/
  margin: 0 auto; /*设置元素外边距*/
}
.shine {
  font-family: "Microsoft YaHei";
  font-size: 20px;
  text-align: center;
  background: -webkit-linear-gradient(left, #0f0, #00f) 0 0 no-repeat;
  -webkit-background-size: 160px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.3);
  -webkit-animation: shine-b38801d0 3s infinite;
}
@-webkit-keyframes shine {
  /*创建动画*/
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 100%;
  }
}
h1 {
  cursor: pointer;
  font: 30px "微软雅黑"; /*设置字体和字体大小*/
  margin: 50px auto; /*设置元素外边距*/
  font-weight: 500; /*设置字体粗细*/
  text-align: center; /*设置文字居中*/
  color: #f35626; /*设置文字颜色*/
  -webkit-animation: bounce 2s infinite; /*设置动画*/
}
@-webkit-keyframes bounce {
  /*创建动画*/
  0%,
  100%,
  20%,
  50%,
  80% {
    -webkit-transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
  }
}
</style>